<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_layout/top :: top"></head>
<body>
<div id="page-wrapper">
    <header th:replace="_layout/header :: header"></header>
        <!-- Breadcrumb Start -->
        <div class="page-banner-image w-100 breadcrumb-bar" style="background-image: url(/static/assets/images/background/1.png); background-repeat: no-repeat;">
            <div class="container">
                <div class="row py-5">
                    <div class="col-sm-6">
                        <h3 class="text-white">博客详情</h3>
                    </div>
                    <div class="col-sm-6">
                        <nav aria-label="breadcrumb" class="float-right">
                            <ol class="breadcrumb mb-0 bg-transparent p-0 mt-2 mt-lg-1">
                                <li class="breadcrumb-item"><a href="#">首页</a></li>
                                <li class="breadcrumb-item"><a href="#">博客</a></li>
                                <li class="breadcrumb-item active" aria-current="page">单人博客</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    <!-- Breadcrumb End -->


    <div class="full-row">
        <div class="container">
                <div class="row justify-content-md-center">
                <div class="col-md-8">
                    <div class="single-post">
                        <div class="single-post-title">
                            <h3 class="mb-2 text-secondary" th:text="${blog.blogTitle}">我们不想让时间变得简单。</h3>
                            <div class="post-meta mb-4">
                                <a href="#"><i class="flaticon-user-silhouette flat-mini"></i> <span th:text="${blog.blogUname}">By Admin</span></a>
                                <a href="#"><i class="flaticon-calendar flat-mini"></i> <span th:text="${blog.blogCreatetime}">Sep 1, 2019</span></a>
                                <a href="#"><i class="flaticon-comments flat-mini"></i> <span>02 Comments</span></a>
                                <a href="#"><i class="flaticon-like flat-mini"></i> <span>30 Likes</span></a>
                                <span><i class="flaticon-document flat-mini text-primary"></i> <a href="#"><span>General</span></a>,<a href="#"><span>Media</span></a></span>
                            </div>
                        </div>
                        <div class="post-image">
                            <img th:src="@{'/static/assets/images/portfolio/'+${blog.blogPicurl}}" alt="Image not found!">
                        </div>
                        <div class="post-content pt-4 mb-5">
                            <p id="content" th:text="${blog.blogContent}"></p>

                            <p>这款车对经典设计元素进行了保留传承，并在保留传统的基础上进行了革新，全新车外观更加年轻运动，内饰材质更加考究与奢华，精工细作的内饰凝聚着功手工劳动者的匠心。家族基因一脉相承，代表着优良的赛车传统，完美的身躯匹配暴躁的动力，堪称最撩人的神器。</p>

                            <blockquote>这款车低矮的宽车身比例，带来极佳的空气动力性能，从钻石切割效果的LED矩阵前大灯，到红宝石般璀璨的LED尾灯，每一处精雕细琢的细节，打造出令人侧目的车身。它生而不凡，为您带来非比寻常的GT之旅。</blockquote>

                            <p>同时采用了更矮、更宽的外观，LED大灯分列于更加直立的镀铬格栅左右，每一个细枝末节都散发着纯正车不可言传的阳刚之气，短捷的前悬设计加上修长的引擎上盖，展现出车头既优雅又锐利的静态感受。车车刚劲有力的车身折痕线自车门两边延展，直至车辆后门。车灯眉两边流淌出的车身腰线，纵穿车辆侧身，在后门边缘上挑，让车辆顿现威武俊朗、干练有力。</p>

                            <blockquote>尾部，固然从正面线条上可以感遭到新车的溜背设想愈加流利，不外共同车尾全新的尾灯设想大概更能突显出新车的活动气质。当车身超越必然速率尾翼就会主动升起来。尾翼升起来后以为就会想活动员一样驰挲跑道。20款车的尾灯不再保持现款的B型设想，接纳了全新的长梭型设想，而且下方排气口接纳了异样的外型照应。</blockquote>

                            <p>“三面翻转中控面板”可以在12.3英寸触控屏幕和车外温度、指南针和计时器组成的机械仪表以及纯木质面板之间切换。全新“双菱形”绗缝刺绣纹理的研发周期耗时18个月。每台全新车的木饰面板需要使用超过10平方米的原木打造，手工匠造实木嵌板需要花费9个小时。座舱均甄选9张北欧公牛皮精心缝制而成，如果选配Mulliner驾驶套件，则每台车将使用长达2.8公里的内饰缝线，需精心缝制310675针，手工匠造而成。</p>
                        </div>
                        <div class="tagcloud">
                            <ul>
                                <li><a href="#">一般的</a></li>
                                <li><a href="#">视频</a></li>
                                <li><a href="#">媒体</a></li>
                                <li><a href="#">web</a></li>
                                <li><a href="#">parallax</a></li>
                                <li><a href="#">ecommerce</a></li>
                                <li><a href="#">t-shirt</a></li>
                                <li><a href="#">women</a></li>
                                <li><a href="#">trade</a></li>
                                <li><a href="#">animation</a></li>
                                <li><a href="#">theme</a></li>
                            </ul>
                        </div>
                        <div class="share-post mt-5">
                            <span><b>共享此帖子:</b></span>
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-google-plus-g"></i></a>
                            <a href="#"><i class="fab fa-pinterest-p"></i></a>
                        </div>
                    </div>
                    <div class="authore-meta mt-5">
                        <div class="modal-content">
                            <div class="modal-header bg-gray py-2">
                                <span class="modal-title">发布者: <a th:text="${blog.blogUname}">John Doe</a></span>
                            </div>
                            <div class="modal-body d-flex">
                                <div class="author-image"><img class="rounded-circle" src="/static/assets/images/thumb/square7.png" alt="image not found!"></div>
                                <p>Mus sed luctus sagittis. Elementum porttitor nullam dis montes. Eu adipiscing purus hendrerit eros habitasse facilisi non mus pellentesque natoque tincidunt congue suscipit porttitor ullamcorper cras a viverra ipsum
                                    nascetur hymenaeos.</p>
                            </div>
                        </div>
                    </div>
                    <div id="comments" class="comments mt-5">
                        <h3 class="down-line mb-5">评论:</h3>
                        <div class="media" th:each="comment:${pageInfo.getList()}">
                            <img src="/static/assets/images/thumb/square5.png" class="mr-3 rounded-circle" alt="...">
                            <div class="media-body">
                                <h5 class="mt-0" th:text="${comment.commentUid}">Lee Sipes</h5>
                                <div class="comments-date mb-2"><span>发表于<a th:text="${comment.commentCreatetime}">21th May, 2019</a></span></div>
                                <p th:text="${comment.commentContent}">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec
                                    lacinia congue felis in faucibus.</p>
                            </div>
                        </div>

                    </div>

                    <div class="mt-5 form-boder">
                        <h3 class="down-line mb-4">留下你的评论</h3>
                        <form class="contact_message" th:action="@{'/blogs/'+${blog.blogId}}" method="post" novalidate="novalidate">
                            <div class="row">
                                <!-- 博客ID-->
                                <input type="hidden" id="commentBid" name="commentBid" th:value="${blog.blogId}">
                                <!--评论者ID-->
                                <input type="hidden" id="commentUid" name="commentUid" value="3">
                                <!--评论内容-->
                                <div class="form-group col-md-12 col-sm-12">
                                    <textarea class="form-control" id="commentContent" rows="5" name="commentContent" placeholder="Message"></textarea>
                                </div>
                                <div class="form-group col-md-12 col-sm-6">
                                    <button class="btn btn-primary" id="send" value="send" type="submit">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer th:replace="_layout/footer :: footer"></footer>
        <a href="#" class="bg-primary text-white hover-bg-primary" id="scroll"><i class="fa fa-angle-up"></i></a>
    </div>

    <!-- Javascripts -->
<div th:replace="_layout/bottom :: bottom"></div>

</body>
</html>